<template>
    <div class="table">

        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <span class="container-title-p">
                    财务数据
                    <i class="iconfont icon-jiantou"></i>
                  </span>
                  <span>总账户资金信息</span>
                  </el-breadcrumb-item>
            </el-breadcrumb>
        </div>


    <div class="modulecontainer">
        <div class="panel-container">
          <div class="panel-title">比特币持有数量</div>
          <div class="panel-content pipecontainer" id="bitcoinNum">
            
          </div>
          <div class='total-account'>
            <p>BTC总数量：{{(Number(virtual[0].yonghu*100000000000) + Number(virtual[0].pingtai*100000000000))/100000000000}}</p>
            <p>用户持有：{{virtual[0].yonghu}}</p>
            <p>平台持有：{{virtual[0].pingtai}}</p>
          </div> 
        </div>

        <div class="panel-container">
          <div class="panel-title">以太坊持有数量</div>
          <div class="panel-content pipecontainer" id="yitaicoinNum">
            
          </div>
          <div class='total-account'>
            <p>ETH总数量：{{(Number(virtual[1].yonghu*100000000000) + Number(virtual[1].pingtai*100000000000))/100000000000}}</p>
            <p>用户持有：{{virtual[1].yonghu}}</p>
            <p>平台持有：{{virtual[1].pingtai}}</p>
          </div> 
        </div>

        <div class="panel-container">
          <div class="panel-title">华克金持有数量</div>
          <div class="panel-content pipecontainer" id="huakeNum">
            
          </div>
          <div class='total-account'>
            <p>WCG总数量：{{(Number(virtual[2].yonghu*100000000000) + Number(virtual[2].pingtai*100000000000))/100000000000}}</p>
            <p>用户持有：{{virtual[2].yonghu}}</p>
            <p>平台持有：{{virtual[2].pingtai}}</p>
          </div> 
        </div>
    </div>

     <!-- <div class="modulecontainer">
         
        <div class="panel-container numbercontainer">
          <div class="panel-title">虚拟币转入总次数</div>
          <div class="panel-content coinnum">
            100
          </div>
        </div>

          <div class="panel-container numbercontainer">
          <div class="panel-title">虚拟币转出总次数</div>
          <div class="panel-content coinnum">
            300
          </div>
        </div>
           <div class="panel-container numbercontainer">
          <div class="panel-title">BTM取款总次数</div>
          <div class="panel-content coinnum">
            500
          </div>
        </div>

           <div class="panel-container numbercontainer">
          <div class="panel-title">BTM存款总次数</div>
          <div class="panel-content coinnum">
            700
          </div>
        </div>

    </div> -->


    <div class="modulecontainer">
      <div class="container-title">现金统计</div>
      <el-row :gutter="20" type='flex' justify="start" class='xjtj'>
        <el-col :span="4" v-for='(item,index) of countryAmount' :key='index'><div class="grid-content bg-purple">{{item.country.chineseName}}: {{item.total}}</div></el-col>
        <!-- <el-col :span="4"><div class="grid-content bg-purple">美元：134567</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">人民币：1413231</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">韩元：2134</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">日元：141441</div></el-col> -->
      </el-row>
    </div>
    <div class="modulecontainer">
   <div class="container-title">大户排名20强</div>
    <el-table   :data="userData" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column  label="头像" align="center">
                 <template scope="scope">
              <img :src="scope.row.user.detail.avatar" style="margin-top:5px;width: 80px;height: 80px"/>
            </template>
            </el-table-column>
            <el-table-column  prop="" label="排名" align="center"> 
            </el-table-column>
            <el-table-column prop="user.detail.name" label="姓名" align="center">
            </el-table-column>
                  <el-table-column prop="user.phone" label="联系方式" align="center">
            </el-table-column>
                <el-table-column prop="user.country.chineseName" label="注册国家" align="center">
            </el-table-column>

            <el-table-column label="账户信息"  width="600" align="center"> 
              <template slot-scope="scope">
                比特币持有数量：{{scope.row.user.accounts[0].amount}},以太坊持有数量：{{scope.row.user.accounts[1].amount}},华克金持有数量：{{scope.row.user.accounts[2].amount}}
              </template>
            </el-table-column>
         
    
    </el-table>
      <div class="pagination">
        <el-pagination
          :page-size="params.size"
          @current-change ="handleCurrentChange"
          layout="prev, pager, next"
          :total="all_page">
        </el-pagination>
      </div>

    </div>


    <loading v-if='loading' :tip='tip'></loading>
    </div>
</template>

<script>
import * as rpConfig from "../../../../rpConfig/constant";
import { HttpReq } from "../../../service/server";
import echarts from "echarts";
import {api,apiGet,apiPatch} from "@/api/index";
import loading from "@/components/common/loading.vue";

var Server = new HttpReq();
export default {
  components:{
    loading
  },
  data() {
    return {
      loading:false,
      tip:'',
      virtual:[
        {
          pingtai:0,
          yonghu:0,
        },
        {
          pingtai:0,
          yonghu:0,
        },
        {
          pingtai:0,
          yonghu:0,
        }
      ],
      ugcData: [],
      typeCenter: [],
      cur_page: 1,
      params:{
        page:0,
        size:20,
      },
      all_page:20,
      userData:[
      //   {
      //   user:{
      //     detail:{

      //     },
      //     country:{

      //     },
      //     accounts:{

      //     },
      //   },
      // }
      ],
      // all_page: 1,
      activityId: "",
      orderBy: "",
      del_list: "",
      offset: 10,
      countryAmount:[],
      select_cate: "",
         userCenter: [
        {
          u_avatar:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2809576112,626361756&fm=27&gp=0.jpg",
          u_name:"昵称",
          u_tel:"18817741235",
          u_country:"中国",
          type_name:"分组",
          account_info:"比特币持有：100；以太坊持有：80；华克金持有：70",
          index:1

        },
            {
          u_avatar:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2809576112,626361756&fm=27&gp=0.jpg",
          u_name:"昵称",
          u_tel:"18817741235",
          u_country:"中国",
          type_name:"分组",
          account_info:"比特币持有：80；以太坊持有：80；华克金持有：70",
           index:2

        },
            {
          u_avatar:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2809576112,626361756&fm=27&gp=0.jpg",
          u_name:"昵称",
          u_tel:"18817741235",
          u_country:"中国",
          type_name:"分组",
          account_info:"比特币持有：80；以太坊持有：70；华克金持有：70",
           index:3

        }
      ],
    };
  },
  mounted() {
    this.getList();
  },
  computed: {},
  methods: {
    handleSelectionChange(){},
    getList(){
      this.loading=true;
      this.tip='虚拟币数量';
      // apiGet.account.accountTotal({}).then(res=>{
      //   console.log(res,'总额')
      // })
      // 获取比特币
      apiGet.account.virtualCurrency({},true,'1').then(res=>{
        let params=[{value:res.amount,name:'用户持有'}];
        //console.log(res,'用户虚拟币总数');
        this.tip='用户排行';
        this.virtual[0].yonghu=res.amount;
        apiGet.account.platform({},true,'1').then(resn=>{
          //console.log(resn,'平台虚拟币总数');
          params.push({value:resn.amount,name:'平台持有'});
          this.virtual[0].pingtai=resn.amount;
          this.initBitCoin("bitcoinNum", "比特币数量",params,'BTC');
          // console.log(params,'BTC')
        })
      })
      // 获取比特币结束
      // 获取以太坊
      apiGet.account.virtualCurrency({},true,'2').then(res=>{
        let params=[{value:res.amount,name:'用户持有'}];
        //console.log(res,'用户虚拟币总数');
        this.tip='用户排行';
        this.virtual[1].yonghu=res.amount;
        apiGet.account.platform({},true,'2').then(resn=>{
          //console.log(resn,'平台虚拟币总数');
          params.push({value:resn.amount||0,name:'平台持有'});
          this.virtual[1].pingtai=resn.amount||0;
          this.initBitCoin("yitaicoinNum", "以太坊数量",params,'ETH');
          // console.log(params,'ETH')
        })
      })
      // 获取以太坊结束
      // 获取华克金
      apiGet.account.virtualCurrency({},true,'3').then(res=>{
        let params=[{value:res.amount,name:'用户持有'}];
        //console.log(res,'用户虚拟币总数');
        this.tip='用户排行';
        this.virtual[2].yonghu=res.amount;
        apiGet.account.platform({},true,'3').then(resn=>{
          //console.log(resn,'平台虚拟币总数');
          params.push({value:resn.amount,name:'平台持有'});
          this.virtual[2].pingtai=resn.amount;
          this.initBitCoin("huakeNum", "华克金数量",params,'WCG');
          // console.log(params,'WCG')
          this.loading=false;
        })
      })
      // 获取华克金结束

      apiGet.account.userTop({}).then(res=>{
        // //console.log(res,'用户排行');
        this.userData = res;
        this.tip='国家金额汇总';
      })

      apiGet.drive.countryAmount({}).then(res =>{
        // //console.log(res,'国家金额汇总')
        this.countryAmount = res;
        
      })
    },
    handleCurrentChange(val){
      this.params.page=val-1;
      this.getList();
    },
    initBitCoin(id, title,data,titles) {
      let myChart = echarts.init(document.getElementById(id));
      let option = {
        title: {
          text: titles,
          subtext: "持有比例",
          x: "left"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          // orient: "vertical",
          bottom:10,
          left: "center",
          data: ["用户持有", "平台持有"]
        },
        series: [
          {
            label:{
              normal:{
                position:'inner',
                formatter:'{d}%'
              }
            },
            name: title,
            type: "pie",
            radius: "60%",
            center: ["50%", "50%"],
            data:data,
            // data: [
            //   { value: 30, name: "用户持有" },
            //   { value: 70, name: "平台持有" }
            // ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ],
        color:['#5B9BD5','#ED7D31'],
      };
      // 绘制图表
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
#bitcoinNum {
  position: relative;
}
.xjtj{
  margin:20px 0;
}
.modulecontainer{

   
    overflow:hidden;
    margin-top:20px;
    background: #fff;
    padding:10px 0;

  
}
.total-account{
  text-align: center;
  margin-bottom: 8px;
  line-height: 28px;
}

.container-title{
    padding:10px 20px;
    background:rgb(223, 236, 235);
    font-weight: 600;
}
.coinnum{
    font-size:20px;
    font-weight: bold;
    color:#555;
}
/* 数据列表 */
.panel-container {
  border: 1px solid #ececec;
  padding: 0;
  float: left;
  margin-right: 20px;
}
.panel-title {
  background: #ececec;
}
.panel-title,
.panel-content {
  padding: 10px 20px;
  box-sizing: border-box;
}
.iconfont {
  margin-right: 5px;
  color: rgb(217, 122, 93);
}
.pipecontainer {
  width: 300px;
  height: 300px;
}
.numbercontainer{
   width:200px;
   height:200px;
}
</style>